<template>
  <div class="user-view">
    <h1>银行卡列表</h1>
    <div class="topTitle clearfix">
      <span>支持银行</span>
      <span>单笔限额(元)</span>
    </div>
    <template v-if="bankList">
      <ul class="bankList">
        <BankItem v-for="(item,index) in bankList.body" :key="index" v-bind:item="item">
        </BankItem>
      </ul>
    </template>  
  </div>
</template>

<script>
  import BankItem from '../components/BankItem.vue'

  function fetchData (store) {
    return store.dispatch('FETCH_BANK', {
      type: 1
    })
  }
  export default {
    name: 'user-view',
    components: { 
      BankItem
    },
    computed: {
      bankList () {
        return this.$store.state.bankList
      }
    },
    preFetch: fetchData,
    beforeMount () {
      fetchData(this.$store)
    },
    mounted(){
      console.log(this.$store.state.bankList);
    }
  }
</script>

<style lang="stylus">
.user-view
  background-color #fff
  box-sizing border-box
  padding 2em 1em
  h1
    margin 0
    font-size 1.5em
  .clearfix
    overflow hidden
  .topTitle
    line-height 27px
    margin-top 15px
    font-size 12px

    span:nth-child(1) 
      float left
    span:nth-child(2)
      float right

  .bankList
    font-size 15px
    padding 0
    li
      height 54px
      line-height 54px
      border-bottom 1px solid #efefef
      padding 0 22px
    li:nth-last-child(1)
      border-bottom none
  .images
    display block
    width 20px
    height 20px
    img
      display block
      width 100%
      height 100%
    margin-right 12px
    float left
    vertical-align top
    margin-top 17px
  .t1
    float left
  .t2
    float right
    color #868b90 
</style>
